<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>{$admin.title} | {$admin.name|default='OneWeekBackend'}</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    {css href="__ADMIN_PLUGINS__/bootstrap/css/bootstrap.min.css" /}
    {css href="__ADMIN_PLUGINS__/font-awesome/css/font-awesome.min.css" /}
    {css href="__ADMIN_CSS__/AdminLTE.min.css" /}
    {css href="__ADMIN_CSS__/admin.css" /}

    <!-- 如果有登录背景 -->
    {if $login_config.background}
    <style>
        .login-page {
            background-color: #ececec;
            background-image: url({$login_config.background});
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            background-position: 50% 50%;
        }
    </style>
    {/if}

    <script>
        var adminDebug = {$debug};
    </script>

    {js href="__ADMIN_PLUGINS__/jquery/jquery.min.js" /}
    {js href="__ADMIN_PLUGINS__/bootstrap/js/bootstrap.min.js" /}
    {js href="__ADMIN_PLUGINS__/jquery-validation/jquery.validate.min.js" /}
    {js href="__ADMIN_PLUGINS__/jquery-validation/localization/messages_zh.min.js" /}
    {js href="__ADMIN_PLUGINS__/layer/layer.js" /}
    {js href="__ADMIN_JS__/admin.js" /}

    <!--[if lt IE 9]>
    {js href="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" /}
    {js href="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" /}
    <![endif]-->

</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a>{$admin.name|default=''}</a>
    </div>
    <div class="login-box-body">
        <p class="login-box-msg">登录</p>
        <form class="dataForm" id="dataForm" action="" method="post">
            <div class="form-group has-feedback">
                <input name="username" id="username" autocomplete="off" type="text" class="form-control"
                       placeholder="用户名（手机号）">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input name="password" id="password" autocomplete="off" type="password" class="form-control"
                       placeholder="密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>




            {if $login_config.phone_code==1}
            <div class="row" style="margin-bottom: 15px;">
                <div class="col-sm-8">
                    <input type="number" id="phone_code" class=" form-control" name="phone_code" placeholder="手机验证码" maxlength="6">
                </div>

                <div class="col-sm-4" style="padding-left: 0">
                    <div id="countdownButton" class="btn btn-primary btn-block btn-flat" onclick="startCountdown()">发送验证码</div>
                </div>
            </div>
            <script>
                function startCountdown() {
                    if(!(/^1[3456789]\d{9}$/.test($("#username").val()))){
                        layer.msg('用户名请输入正确的手机号', {icon: 2, scrollbar: false,offset:'200px',time: 5000});
                        return false;
                    }
                    //访问的url
                    let url = "{:url('sendsmscode')}"
                    //访问方式，默认post
                    let layerMethod = 'post';
                    //访问成功后跳转的页面，不设置此参数默认根据后台返回的url跳转
                    let go = 'url://reload';
                    let dataData;
                    dataData = {
                        "username": $("#username").val(),}
                    ajaxRequests(url, layerMethod, dataData, go);

                    var button = document.getElementById('countdownButton');
                    button.style.pointerEvents = 'none';
                    var count = 60;

                    var countdown = setInterval(function() {
                        button.innerHTML = '请等待 ' + count + ' 秒';
                        count--;
                        if (count <= 0) {
                            clearInterval(countdown);
                            button.style.pointerEvents = '';
                            button.innerHTML = '发送验证码';
                            count = 60; // 重置倒计时
                        }
                    }, 1000);
                }
                function ajaxRequests(url, method, data, go) {
                    let loadT = layer.msg('正在请求,请稍候…', {icon: 16, time: 0, shade: [0.3, '#000'], scrollbar: false,offset:'200px'});
                    $.ajax({
                            url: url,
                            dataType: 'json',
                            type: method,
                            data: data,
                            success: function (result) {
                                // debugger
                                layer.close(loadT);
                                layer.msg(result.msg, {
                                    icon: result.code ? 1 : 2,
                                    scrollbar: false,
                                    offset:'200px'
                                });

                                if (adminDebug) {
                                    console.log('request success!');
                                    if (result.code === 1) {
                                        console.log('%cresult success', ';color:#00a65a');
                                        go = 'url://close-refresh';
                                    } else {
                                        console.log('%cresult fail', ';color:#f39c12');
                                        go = 'url://reload';
                                    }
                                    setTimeout(function () {
                                        return false;
                                    }, 300);
                                }
                            },
                            error: function (xhr, type, errorThrown) {
                                console.log("error")
                                //异常处理；
                                if (adminDebug) {
                                    console.log('%crequest fail!', ';color:#dd4b39');
                                    console.log();
                                    console.log("type:" + type + ",readyState:" + xhr.readyState + ",status:" + xhr.status);
                                    console.log("url:" + url);
                                    console.log("data:");
                                    console.log(data);
                                    layer.close(loadT);
                                }
                                layer.msg('访问错误,代码' + xhr.status, {icon: 2, scrollbar: false,});
                            }
                        }
                    );
                }
            </script>
            {/if}




            {if $login_config.captcha==1}
            {include file='auth/captcha' /}
            {else/}
            {if $login_config.captcha==2}
            {include file='auth/gee_test' /}
            {/if}
            {/if}


            <div class="row">
                <div class="col-xs-8">
                    <!--                    <div class="checkbox">-->
                    <!--                        <label>-->
                    <!--                            <input id="remember" name="remember" value="1" type="checkbox"> 记住我-->
                    <!--                        </label>-->
                    <!--                    </div>-->
                </div>
                <div class="col-xs-4" style="width: 100%">
                    {:token()}
                    <button type="submit" id="loginButton" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="browser_warning" style="display: none">
    <div class=" margin text-center">
        <p class="text-red ">请使用现代浏览器(谷歌浏览器、360极速或其他国产浏览器极速模式)操作本后台！</p>
        <a class="btn btn-success" target="_blank" href="https://www.google.cn/chrome/" data-toggle="tooltip"
           title="点击去下载谷歌浏览器">谷歌浏览器</a>
        <a class="btn btn-success" target="_blank" href="https://browser.360.cn/ee/index.html" data-toggle="tooltip"
           title="点击去下载360极速浏览器">360极速浏览器</a>
        <a class="btn btn-success" target="_blank" href="https://browser.qq.com/" title="点击去下载QQ浏览器"
           data-toggle="tooltip">QQ浏览器</a>
    </div>
</div>

<script>

    $(document).ready(function () {
        $("#dataForm").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 6
                },
            },
            messages: {
                username: {
                    required: "请输入用户名",
                    minlength: "用户名长度不能小于2"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于6"
                },
            },
            submitHandler: function (form) {
                console.log(typeof refreshCaptcha === "function");
                formSubmit(form, false, typeof refreshCaptcha === "function" ? refreshCaptcha : false);
                return false;
            }
        });
        $('#username').focus();
    });


    checkBrowser();

    /*检查浏览器*/
    function checkBrowser() {
        if (isIE()) {
            if (adminDebug) {
                console.log('古代浏览器');
            }
            layer.open({
                type: 1,
                content: $('#browser_warning').html(),
                icon: 5,
                title: '警告',
                area: ['500px', '300px'],
                closeBtn: 0,
                moveType: 1,
                resize: false
            });
        } else {
            if (adminDebug) {
                console.log('现代浏览器');
            }
        }
    }

    function isIE() {
        return !!window.ActiveXObject || "ActiveXObject" in window;
    }

</script>
</body>
</html>
